<script setup lang="ts">
import { ref, PropType, defineAsyncComponent } from 'vue';
import type { IUser } from '../userList/type';
import type { ISocketUser, ISocketMessage } from '../../type';
import type { IPrivateSend } from './type';

const emits = defineEmits(['handlePrivateSend']);
defineProps({
	// 所有的聊天数据
	privateMessage: {
		type: Array as PropType<ISocketMessage[]>,
		required: true,
		default: () => [],
	},
});

// 聊天内容
const chatMessage = defineAsyncComponent(() => import('../message/index.vue'));
// 发送消息
const chatSend = defineAsyncComponent(() => import('../send/index.vue'));

// 弹窗状态
const isDrawer = ref(false);
// 接收人
const acceptUser = ref<IUser>();
// 发送人
const sendingUser = ref<ISocketUser>();

// 设置弹出窗状态
const setIsDrawer = (state: boolean) => {
	isDrawer.value = state;
};
/**
 * @description: 设置私聊人信息
 * @param {*} accept  接受人
 * @param {*} sending 发送人
 */
const setUser = (accept: IUser, sending: ISocketUser) => {
	acceptUser.value = accept;
	sendingUser.value = sending;
};

// 点击发送消息
const handleSend = (msg: string) => {
	if (!sendingUser.value?.id) return;
	const params: IPrivateSend = {
		...sendingUser.value,
		acceptId: acceptUser.value!.id,
		msg,
	};
	emits('handlePrivateSend', params);
};

// 设置信息列表

defineExpose({
	isDrawer,
	acceptUser,
	setIsDrawer,
	setUser,
});
</script>

<template>
	<div class="private-chat">
		<el-drawer v-model="isDrawer" :destroy-on-close="true">
			<template #header>
				<div class="user">
					<img :src="acceptUser?.avatar" />
					{{ acceptUser?.name }}
				</div>
			</template>
			<chatMessage :message-list="privateMessage" />
			<chatSend @handle-send="handleSend" />
		</el-drawer>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
